<template>
	<div id="SendSale">
		<x-header :left-options="{showBack: false}" title="拍品管理" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="title-bar">
			<div class="tabWrap">
				<tab :class="tabBarFixed == true ? 'isFixed' :''" :line-width=2 active-color='#a30000' custom-bar-width="36px">
					<tab-item class="vux-center" :selected="item.name == '预展中'" v-for="item in list" @on-item-click="tabChange(item.type)" :key="item.type">{{item.name}}</tab-item>
				</tab>
			</div>
		</div>
		<div class="selling" v-if="infoList == ''">
			<div class="no-data">
				<img src="../../assets/images/home/nodata.png" />
			</div>
		</div>
		<div v-else class="selling">
			<ul class="list" style="overflow: hidden;">
				<li v-for="(item,index) in infoList" :key="index">
					<img v-if="item.goods_thumb == ''" src="" alt="" onerror="src='/los/uploads/thumb/header/defaultImg.jpg'" class="list_bg" />
					<img v-else :src="'/los/uploads/thumb/goods/' + item.goods_id  + '_172X207.jpeg'" alt="" class="list_bg" />
					<div class="info" v-if="selected == 1">
						<router-link :to="'/Detail/id/' + item.auction_id">
							<p class="name">{{item.goods_name}}</p>
							<span class="price">当前价: <b>￥{{item.auction_bidprice}}</b></span>
						</router-link>
						<div class="choose">
							<span @click="removeAuction(index,item.auction_id)">下架</span>
							<router-link :to="'Upload/auction_id/' + item.auction_id">
								<span class="update">修改</span>
							</router-link>
							<confirm v-model="isRemove" :title="title1" @on-confirm="auctionUnshilf"></confirm>
						</div>
					</div>
					<router-link :to="'/Detail/id/' + item.auction_id">
						<div class="info" v-if="selected == 2 || selected == 5">
							<p class="name">{{item.goods_name}}</p>
							<span class="auctionPrice">当前价: <b>￥{{item.auction_bidprice}}</b></span>
						</div>
					</router-link>
					<div class="info" v-if="selected == 4">
						<router-link :to="'/Detail/id/' + item.auction_id">
							<p class="name">{{item.goods_name}}</p>
							<span class="auctionFail">流拍时间: {{timer2time(item.auction_endtime)}}</span>
						</router-link>
						<!--<span>出价次数：{{item.bidding_count}}</span>-->
						<div class="racket">
							<span @click="removeAuction(index,item.auction_id)" class="remove">删除</span>
							<router-link :to="'Upload/auction_id/' + item.auction_id + '?again=racket'">
								<span class="remove again">重新上架</span>
							</router-link>
						</div>
						<confirm v-model="isRemove" :title="title2" @on-confirm="auctionDel"></confirm>
					</div>
					<div class="info" v-if="selected == 6">
						<p class="name">{{item.goods_name}}</p>
						<div class="draft">
							<p class="money">￥{{item.auction_bidprice}}</p>
							<p class="timer"> {{timer2time(item.upd_time)}}</p>
							<div class="choose">
								<router-link :to="'Upload/auction_id/' + item.auction_id">
									<span class="grounding">上架</span>
								</router-link>
								<span class="trash" @click="removeAuction(index,item.auction_id)">删除</span>
							</div>
							<confirm v-model="isRemove" :title="title2" @on-confirm="auctionDel"></confirm>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<loading :show="show1" :text="text"></loading>
		<toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, Tab, TabItem, Sticky, Loading, Toast, dateFormat, Confirm } from 'vux'
	import $ from 'jquery';
	import axios from 'axios'
	import BScroll from 'better-scroll';
	import CountDown from 'vue2-countdown';
	export default {
		filters: {
			dateFormat
		},
		data() {
			return {
				index: 0,
				checked: '',
				show: false,
				show1: false,
				tabBarFixed: false,
				show2: false,
				isRemove: false,
				isShelf: false,
				chooseIndex: '',
				auction_id: '',
				title1: '是否确定下架此拍品',
				title2: '是否删除此商品',
				topTip: '下拉刷新',
				bottomTip: '查看更多',
				listContent: [],
				list: [{
						name: '预展中',
						type: '1'
					},
					{
						name: '拍卖中',
						type: '2'
					},
					{
						name: '已流拍',
						type: '4'
					},
					{
						name: '已失败',
						type: '5'
					},
					{
						name: '草稿箱',
						type: '6'
					},
				],
				selected: 1,
				cache: true,
				text: '加载中',
				infoList: [],
				curTime: '',
				flag: true,
				globals: '',
				success: false,
				msg: ''
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Sticky,
			Loading,
			CountDown,
			Toast,
			Confirm
		},
		activated() {
			window.addEventListener('scroll', this.handleScroll);
		},
		mounted() {
			this.tabChange(1);
		},
		beforeRouteLeave(to, from, next) {
			if(to.name == 'Detail') {
				from.meta.keepAlive = true; // 跳转到 详情页时，店铺页面缓存，即不刷新
			} else {
				from.meta.keepAlive = false;
			}
			next();
		},
		deactivated() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		created() {
			//将时间戳转换成日期的封装函数
			Date.prototype.Format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		methods: {
			//点击下架商品
			removeAuction: function(index, auction_id) {
				this.isRemove = !this.isRemove;
				this.chooseIndex = index;
				this.auction_id = auction_id;
			},

			auctionUnshilf: function(index, auction_id) {
				index = this.chooseIndex;
				auction_id = this.auction_id;
				let params = {
					auction_id: auction_id
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/member/auction_unshelf.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.infoList.splice(index, 1);
					}
				}).catch((err) => {

				})
			},
			//删除拍品
			auctionDel: function(index, auction_id) {
				index = this.chooseIndex;
				auction_id = this.auction_id;
				console.log(auction_id);
				let params = {
					auction_id: auction_id
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/member/auction_del.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.infoList.splice(index, 1);
					}
				}).catch((err) => {

				})
			},

			//选项卡切换
			tabChange: function(index) {
				let _this = this;
				let more = true;
				let page = 1;
				this.selected = index;
				this.$http({
					method: 'GET',
					url: '/los/api/member/auction_list.json?ts=' + this.selected,
					data: ''
				}).then((result) => {
					console.log(result);
					this.infoList = result.data.data;
					this.curTime = result.data.cur_time;
					this.cache = false;
					this.$nextTick(() => {
						this.cache = true;
					})
				}).catch((err) => {})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							if(_this.selected == index) {
								axios.get('/los/api/member/auction_list.json?ts=' + index + '&page=' + page).then(function(result) {
									$.each(result.data.data, function(index, val) {
										_this.infoList.push(val);
									});
									more = true;
									if(result.data.code == 0) {
										more = false;
									}
								}).catch(function(error) {
									console.log(error);
								});
							}
						}
					}
				})
			},
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				var offsetTop = document.querySelector('.title-bar .tabWrap').offsetTop
				if(scrollTop > offsetTop) {
					this.tabBarFixed = true;
				} else {
					this.tabBarFixed = false;
				}
			},
			//将时间戳转换成日期
			timer2time: function(time) {
				return new Date(parseInt(time) * 1000).Format("MM-dd hh:mm:ss");
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}

	.no-data img {
		width: 100%;
	}

	.isFixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
	}

	.header {
		background: #fff;
	}

	.nodata {
		width: 100%;
		height: 100%;
		margin: 0 45%;
	}

	.vux-tab {
		border-top: solid 1px #f3f3f3;
	}

	.selling {
		width: 100%;
	}

	.selling ul {
		width: 100%;
		overflow: hidden;
		margin-bottom: 1rem;
	}

	.selling ul li {
		width: 100%;
		overflow: hidden;
		background: #fff;
		margin-top: 0.26rem;
		padding: 0.26rem;
	}

	.selling ul li .list_bg {
		width: 2.66rem;
		height: 2.66rem;
		border-radius: 0.1rem;
		float: left;
	}

	.selling ul li .info {
		float: left;
		margin-left: 0.26rem;
		width: 6.53rem;
		overflow: hidden;
		height: 2.66rem;
	}

	.selling ul li .info .name {
		line-height: 0.4rem;
		font-size: 0.37rem;
		color: #333;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 0.16rem;
	}

	.selling ul li .info .price {
		margin-top: 0.5rem;
		font-size: 0.32rem;
		color: #777;
		display: block;
		line-height: 0.61rem;
		height: 0.61rem;
	}

	.selling ul li .info .auctionPrice {
		margin-top: 1.4rem;
		display: block;
		line-height: 0.61rem;
		height: 0.61rem;
	}

	.selling ul li .info .auctionFail {
		color: #aaa;
		font-size: 0.32rem;
		margin-top: 0.4rem;
		float: left;
		line-height: 0.8rem;
		height: 0.8rem;
		width: 100%;
	}

	.selling ul li .info b {
		font-size: 0.4rem;
		color: #da4240;
		font-weight: normal;
	}

	.selling ul li .info .draft {
		overflow: hidden;
		margin-top: 0.4rem;
	}

	.selling ul li .info .draft .money {
		float: left;
		font-size: 0.4rem;
		color: #da4240;
	}

	.selling ul li .info .draft .timer {
		float: right;
		font-size: 0.32rem;
		color: #aaa;
	}

	.selling ul li .info .draft .choose {
		margin-top: 0.37rem;
	}

	.selling ul li .info .draft .choose .trash {
		color: #777;
		border: solid 1px #aaa;
	}

	.selling ul li .choose {
		float: right;
		margin-top: 0.2rem;
	}

	.selling ul li .choose span,
	.selling ul li .remove {
		width: 1.97rem;
		height: 0.8rem;
		line-height: 0.8rem;
		text-align: center;
		font-size: 0.37rem;
		display: inline-block;
		border: solid 1px #a30000;
		border-radius: 0.08rem;
		margin-left: 0.26rem;
	}

	.selling ul li .remove {
		float: right;
		margin-top: 1.2rem;
		color: #777;
		border: solid 1px #aaa;
	}

	.selling ul li .racket .again {
		background: #a30000;
		color: #fff;
		border: none;
	}

	.selling ul li .racket .remove {
		margin-top: 0;
	}

	.selling ul li .choose .update,
	.selling ul li .info .draft .choose .grounding {
		background: #a30000;
		color: #fff;
	}
</style>
